<template>
	<view class="price">
		<headTop>
			<uv-navbar title="调价记录" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="search">
			<uv-search placeholder="请输入商品编号" v-model="params.keyword" @search="getList" :clearabled="true"
				:showAction="false" bgColor="rgba(255,255,255, .3)"></uv-search>
		</view>
		<view class="content">
			<view class="list" v-for="item in tableData" :key="item.id">
				<view class="list-info">
					<uv-row>
						<uv-col span="3">
							<uv-image :src="item.image ? item.image : '/static/images/default.png'" width="18vw"
								height="18vw" radius="2vw">
								<template v-slot:error>
									<uv-image src="/static/images/default.png" width="18vw" height="18vw"
										radius="2vw"></uv-image>
								</template>
							</uv-image>
						</uv-col>
						<uv-col span="9">
							<view class="list-title">{{ item.name }}</view>
							<view class="list-details">创建时间: {{ item.created_at }}</view>
							<view>
								<view class="list-details">原价: {{ item.old_price }}</view>
								<view>更新价格: ¥{{ item.new_price }}</view>
							</view>
						</uv-col>
					</uv-row>
				</view>
			</view>
			<view v-if="isBottom">
				<uv-divider text="已经到底了"></uv-divider>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import headTop from "@/components/headTop/index.vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	import { productApi } from "@/api/index";
	const isBottom = ref<boolean>(false);

	const tableData = ref<any>([]);
	const params = ref({
		page: 1,
		limit: 10,
		keyword: "",
		keyword_type: "product_id"
	});

	const getList = async () => {
		try {
			const res = await productApi.getPriceList(params.value);
			if (params.value.limit > res.data.list.length) {
				isBottom.value = true;
			}
			tableData.value = [...tableData.value, ...res.data.list];
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	/* ------------------------------------------------------------下拉加载------------------------------------------------- */
	import { onReachBottom } from "@dcloudio/uni-app";
	onReachBottom(() => {
		if (isBottom.value) return;
		params.value.page++;
		getList();
	});

	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};
</script>

<style lang="scss">
	.price {
		.content {
			padding-bottom: 80px;

			.list {
				background-color: rgba(255, 255, 255, 0.6);
				border-radius: 2vw;
				margin-top: 1.5vw;
				padding: 2vw 3vw;

				.list-info {
					margin-top: 1.5vw;

					.list-title {
						font-weight: 500;
						margin-bottom: 1vw;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.list-details,
					.list-time,
					.list-num {
						font-size: 26rpx;
						color: #999999;
					}

					.list-button {
						line-height: 16vw;
					}
				}
			}
		}
	}
</style>